<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url('https://p1-q.mafengwo.net/s19/M00/03/68/CoNELmLriQAjaN8vAAvS7TNdl5o.jpeg?imageMogr2%2Fthumbnail%2F%21288x218r%2Fgravity%2FCenter%2Fcrop%2F%21288x218%2Fquality%2F90') 50% 50% no-repeat; 
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;

    }
    .common:before{
        content:'';
        position: absolute;
        background:url('https://p1-q.mafengwo.net/s19/M00/03/68/CoNELmLriQAjaN8vAAvS7TNdl5o.jpeg?imageMogr2%2Fthumbnail%2F%21288x218r%2Fgravity%2FCenter%2Fcrop%2F%21288x218%2Fquality%2F90') 50% 50% no-repeat;
        background-size: auto 220px;
        width: 190px;
        height: 220px;
    }
    .left{
        transform: rotate(60deg);
    }
    .left:before{
        transform: rotate(-60deg) translate(48px,-28px);
    }
    .right{
        transform: rotate(-60deg);
    }
    .right:before{
         transform: rotate(60deg) translate(48px,28px);
         bottom: 0;
    }
</style>
<body>
    <div class='wrap'>
        <div class='left common'></div>
        <div class='right common'></div>
    </div>
</body>
</html>
